*{
	margin: 0;
	padding: 0;
}

/*头部*/
.head{
	position: absolute;
	top:50%;
	left: 50%;
	width: 300px;
	height: 300px;
	border: 5px solid #000;
	border-radius: 50%;
	margin-top: -150px;
	margin-left: -150px;
}

/*眉毛*/
.m{
	width: 60px;
	height: 50px;
	border-radius: 50% 50%;
	border: 10px solid #000;
	border-left-color: transparent;
  	border-bottom-color: transparent;
  	border-right-color:transparent;
  	border-top-color: #000;
	
}

.m-left.m{
	position: absolute;
	left:70px;
	top:80px;	
}

.m-right.m{
	position: absolute;
	left:155px;
	top:80px;
}

/*眼睛*/
.eye{
	width: 50px;
	height: 50px;
	border:5px solid #000;
	border-radius: 50% 50%;
	position: absolute;	
	background: #fff;
}

.left.eye{
	left:80px;
	top:110px;	
}

.right.eye{
	left:165px;
	top:110px;
}

/*眼睛里面的眼珠*/
.innerLeftEye{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 18px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid #000;
	background: #000;
	
}

.innerLeftEye:after{
	content: "";
	position: absolute;
	width: 6px;
	height: 8px;
	background: #FFF;
	z-index: 11;
	top: 6px;
	left: 9px;
	border-radius: 50%;
	
}

.innerRightEye{
	position: absolute;
	width: 18px;
	height: 20px;
	top: 20px;
	left: 8px;
	border-top-left-radius: 50% 90%;
	border-top-right-radius: 50% 90%;
	border-bottom-left-radius: 50% 10%;
	border-bottom-right-radius: 50% 10%;
	background: #000;
	box-shadow: 0 -1px 2px black;
}

.innerRightEye:after{
	content: "";
	position: absolute;
	width: 10px;
	height: 13px;
	bottom: -1px;
	left: 4px;
	border-top-left-radius: 50% 100%;
	border-top-right-radius: 35% 80%;
	background: #FFF;
}

/*嘴巴*/
.mouth{
	width: 30px;
	height: 10px;
	border-radius: 50% 50%;
	border: 10px solid #000;
	position: relative;
	top:220px;
	left: 125px;

	-webkit-transform-style: preserve-3d;
	-webkit-animation: 3s myAnimation linear infinite;

	-moz-transform-style: preserve-3d;
	-moz-animation: 3s myAnimation linear infinite;

	-o-transform-style: preserve-3d;
	-o-animation: 3s myAnimation linear infinite;

	transform-style: preserve-3d;
	animation: 3s myAnimation linear infinite;
  	
}

/*动画*/
 @keyframes myAnimation
{
    0%
    {
    	width: 30px;
	    height: 10px;
	    margin: 0;
	    
    }

    50%
    {
    	width: 50px;
	    height: 0;
	    margin-left: -10px;
    }
    
    100%{
    	width: 30px;
	    height: 10px;
	    margin: 0;
    }
}

@keyframes myAnimation
{
    0%
    {
    	width: 30px;
	    height: 10px;
	    margin: 0;
    }

    50%
    {
    	width: 50px;
	    height: 0;
	    margin-left: -10px;
    }
    
    100%{
    	width: 30px;
	    height: 10px;
	    margin:0;
    }
}

 @-webkit-keyframes myAnimation
{
     0%
    {
    	width: 30px;
	    height: 10px;
	    margin: 0;
    }

    50%
    {
    	width: 50px;
	    height: 0;
	    margin-left: -10px;
    }
    
    100%{
    	width: 30px;
	    height: 10px;
	    margin:0;
    }
}

 @-moz-keyframes myAnimation
{
    0%
    {
    	width: 30px;
	    height: 10px;
	    
    }

    50%
    {
    	width: 50px;
	    height: 0px;
    }
    
    100%{
    	width: 30px;
	    height: 10px;
    }
}

 @-o-keyframes myAnimation
{
     0%
    {
    	width: 30px;
	    height: 10px;
	    margin: 0;
    }

    50%
    {
    	width: 50px;
	    height: 0;
	    margin-left: -10px;
    }
    
    100%{
    	width: 30px;
	    height: 10px;
	    margin:0;
    }
}
